<html>
  <head>
    <title>
        节点信息
    </title>
  </head>
  <body>
    <script>
      /*
          一、uni.createSelectorQuery()


                        1、概述

                                返回一个 SelectorQuery 对象实例。

                                可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

                         2、平台差异说明

                                            元服务
                                            √     
                                            
                         3、createSelectorQuery 兼容性

                                              HarmonyOS
                                              HBuilderX 4.23

                         4、注意点

                                ①、使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。

                                ②、默认需要使用到 selectorQuery.in 方法
      */

      /*
           二、SelectorQuery

                         1、概述

                                  查询节点信息的对象

                         2、selectorQuery.in(component)

                                            <1>、概述

                                                        将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。

                                                        （初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

                                            <2>、代码示例

                                                    ★、选项式API

                                                            const query = uni.createSelectorQuery().in(this);
                                                            query.select("#id")
                                                                  .boundingClientRect((data) => {
                                                                    console.log("得到布局位置信息" + JSON.stringify(data));
                                                                    console.log("节点离页面顶部的距离为" + data.top);
                                                                  })
                                                                  .exec();

                                                    ★、组合式API

                                                              import { getCurrentInstance } from 'vue';
                                                              const instance = getCurrentInstance();

                                                              const query = uni.createSelectorQuery().in(instance.proxy);
                                                              query.select("#id")
                                                                .boundingClientRect((data) => {
                                                                  console.log("得到布局位置信息" + JSON.stringify(data));
                                                                  console.log("节点离页面顶部的距离为" + data.top);
                                                                })
                                                                .exec();
                                              <3>、注意：

                                                          支付宝小程序不支持 in(component),使用无效果


                            3、selectorQuery.select(selector)

                                               <1>、概述

                                                        在当前页面下选择第一个匹配选择器 selector 的节点，
                                                        
                                                        返回一个 NodesRef 对象实例，可以用于获取节点信息。

                                               <2>、selector 说明：

                                                          selector 类似于 CSS 的选择器，但仅支持下列语法：

                                                                ①、ID 选择器：#the-id

                                                                ②、class 选择器（可以连续指定多个）：.a-class.another-class

                                                                ③、子元素选择器：.the-parent > .the-child

                                                                ④、后代选择器：.the-ancestor .the-descendant

                                                                ⑤、跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant (H5 暂不支持)

                                                                ⑥、多选择器的并集：#a-node, .some-other-nodes

                              4、selectorQuery.selectAll(selector)

                                               <1>、概述

                                                        在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息

                              5、selectorQuery.selectViewport()

                                                选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。

                              6、selectorQuery.exec(callback)
                              
                                                执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回
      */


      /*
            三、NodesRef

                        1、概述

                                用于获取节点信息的对象
                                
                        2、nodesRef.fields(object,callback)

                                               <1>、概述

                                                           获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。
                                                           
                                               <2>、object 参数说明

                                                            字段名	            类型	          默认值	  必填	说明	                                        平台差异说明

                                                            ①、id	            Boolean	          false	    否	是否返回节点 id	
                                                            
                                                            ②、dataset	      Boolean	          false	    否	是否返回节点 dataset	                            App、微信小程序、H5、小红书小程序

                                                            ③、rect	          Boolean	          false	    否	是否返回节点布局位置（left right top bottom）	

                                                            ⑥、size	          Boolean	          false	    否	是否返回节点尺寸（width height）	

                                                            ⑥、scrollOffset	  Boolean	          false	    否	是否返回节点的 scrollLeft scrollTop，
                                                                                                                节点必须是 scroll-view 或者 viewport

                                                            ⑦、properties	    Array＜string＞	    []	    否	指定属性名列表，返回节点对应属性名的当前属性值
                                                                                                              （只能获得组件文档中标注的常规属性值，
                                                                                                                id class style 和事件绑定的属性值不可获取）	    仅 App 和微信小程序支持

                                                            ⑧、computedStyle	Array＜string＞	    []	    否	指定样式名列表，返回节点对应样式名的当前值	        仅 App 和微信小程序支持、小红书小程序

                                                            ⑨、context	      Boolean	          false	    否	是否返回节点对应的 Context 对象	                  仅 App 和微信小程序支持、小红书小程序

                                                            ⑩、node	          Boolean	          false	    否	是否返回节点对应的 Node 实例，
                                                                                                              当前仅支持 canvas 实例的获取	                    H5, 微信小程序, 抖音小程序, 快手小程序

                          3、nodesRef.boundingClientRect(callback)

                                                    <1>、概述

                                                                添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

                                                                其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

                                                    <2>、callback 返回参数

                                                                    属性	        类型	  说明
                                                                  ①、id	        String	节点的 ID
                                                                  ②、dataset	  Object	节点的 dataset
                                                                  ③、left	      Number	节点的左边界坐标
                                                                  ④、right	    Number	节点的右边界坐标
                                                                  ⑤、top	      Number	节点的上边界坐标
                                                                  ⑥、bottom	    Number	节点的下边界坐标
                                                                  ⑦、width	    Number	节点的宽度
                                                                  ⑧、height	    Number	节点的高度

                          4、nodesRef.scrollOffset(callback)

                                                    <1>、概述

                                                            添    加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery。

                                                    <2>、callback 返回参数

                                                                  属性	        类型	    说明

                                                                ①、id	        String	  节点的 ID

                                                                ②、dataset	  Object	  节点的 dataset

                                                                ③、scrollLeft	Number	  节点的水平滚动位置

                                                                ④、scrollTop	Number	  节点的竖直滚动位置

                           5、nodesRef.context(callback)

                                                    <1>、概述

                                                            添加节点的 Context 对象查询请求。支持 VideoContext、CanvasContext、和 MapContext 等的获取。

                                                    <2>、平台差异说明

                                                              App	H5	             微信小程序   支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	小红书小程序
                                                              √	  HBuilderX 2.4.7+	√	            x	            x	      x	                      √	      √           √             	√   
                                                              
                                                              
                                                    <3>、callback 返回参数

                                                                属性	    类型	    说明
                                                                context	Object	节点对应的 Context 对象


                           6、nodesRef.node(callback)

                                                      <1>、概述

                                                              获取 Node 节点实例。目前支持 Canvas 的获取。

                                                      <2>、平台差异说明

                                                                App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	小红书小程序
                                                                x	  x	    √	        x	              x	      x	                    x	          √	        √	              x

                                                      <3>、callback 返回参数

                                                                属性	类型	    说明
                                                                node	Object	节点对应的 Node 实例

                                                      <4>、注意

                                                                 目前仅能用于canvas
                                                                 
                                                                 canvas需设置type="webgl"才能正常使用


                            7、代码示例

                                                      uni.createSelectorQuery()
                                                        .selectViewport()
                                                        .scrollOffset((res) => {
                                                          console.log("竖直滚动位置" + res.scrollTop);
                                                        })
                                                        .exec();

                                                      let view = uni.createSelectorQuery().in(this).select(".test");

                                                      view.fields(
                                                          {
                                                            size: true,
                                                            scrollOffset: true,
                                                          },
                                                          (data) => {
                                                            console.log("得到节点信息" + JSON.stringify(data));
                                                            console.log("节点的宽为" + data.width);
                                                          }
                                                        )
                                                        .exec();

                                                      view.boundingClientRect((data) => {
                                                          console.log("得到布局位置信息" + JSON.stringify(data));
                                                          console.log("节点离页面顶部的距离为" + data.top);
                                                        })
                                                        .exec();

                                                ★、注意：

                                                          nvue 暂不支持 uni.createSelectorQuery，暂时使用下面的方案

                                                          <template>
                                                              <view class="wrapper">
                                                                <view ref="box" class="box">
                                                                  <text class="info">Width: {{size.width}}</text>
                                                                  <text class="info">Height: {{size.height}}</text>
                                                                  <text class="info">Top: {{size.top}}</text>
                                                                  <text class="info">Bottom: {{size.bottom}}</text>
                                                                  <text class="info">Left: {{size.left}}</text>
                                                                  <text class="info">Right: {{size.right}}</text>
                                                                </view>
                                                              </view>
                                                            </template>

                                                            <、script>
                                                              // 注意平台差异
                                                              // #ifdef APP-NVUE
                                                              const dom = weex.requireModule("dom");
                                                              // #endif

                                                              export default {
                                                                data() {
                                                                  return {
                                                                    size: {
                                                                      width: 0,
                                                                      height: 0,
                                                                      top: 0,
                                                                      bottom: 0,
                                                                      left: 0,
                                                                      right: 0,
                                                                    },
                                                                  };
                                                                },
                                                                onReady() {
                                                                  setTimeout(() => {
                                                                    const result = dom.getComponentRect(this.$refs.box, (option) => {
                                                                      console.log("getComponentRect:", option);
                                                                      this.size = option.size;
                                                                    });
                                                                    console.log("return value:", result);
                                                                    console.log("viewport:", dom.getComponentRect("viewport"));
                                                                  }, 100);
                                                                },
                                                              };
                                                            </、script>

      */

      /*
           四、返回值

                                                              https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#%E8%BF%94%E5%9B%9E%E5%80%BC-3


                       主要是：
                       
                                SelectorQuery对象的的方法：

                                              ①、in(component: any | null): SelectorQuery https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#in

                                              ②、select(selector: string): NodesRef  https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#select

                                              ③、selectAll(selector: string): NodesRef  https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectall

                                              ④、selectViewport(): NodesRef   https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectviewport

                                              ⑤、exec(callback: (result: Array<any>) => void | null): NodesRef | null  

                                                            https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#exec

                                
                                文档比较多，主要介绍上面这些方法的返回值


                                              
      */
    </script>
  </body>
</html>